<template>
  <div>
    <el-dialog
      :visible.sync="openFormDialog"
      :fullscreen="true"
      :show-close="false">
      <div style="
            border-bottom: 1px solid rgb(232,232,232);
            position: absolute;
            top: 0; left: 0;
            height: 70px; width: 100%;
            line-height: 70px; padding-left: 20px; padding-right: 20px;">
        <span style="font-weight: bold; font-size: 20px;">{{ title }}</span>

        <div style="float:right;">
          <el-button plain icon="el-icon-close" @click="openFormDialog = false"></el-button>
        </div>

      </div>

      <div style="margin: 40px 40px 70px 40px;">
        <el-card class="box-card" style="margin-bottom: 20px;" v-show="formList.length > 0">
  <!--        <div slot="header" class="clearfix">-->
  <!--          <span>{{ title }}</span>-->
  <!--        </div>-->

          <el-row>
            <el-col :span="24"><div class="grid-content bg-purple" style="padding: 10px;">
              <el-table
                ref="multipleTable"
                :data="formList"
                height="657"
                max-height="657"
                border
                tooltip-effect="dark"
                style="width: 100%;height: 600px;">
                <el-table-column
                  width="55"
                  align="center">
                  <template slot-scope="scope">
                    <el-radio v-model="checkForm" :label="scope.row.formId"><span></span></el-radio>
                  </template>
                </el-table-column>
                <el-table-column
                  type="index"
                  label="序号"
                  width="55"
                  align="center"
                  sortable>
                </el-table-column>
                <el-table-column
                  prop="name"
                  align="center"
                  label="表单名称">
                </el-table-column>
                <el-table-column
                  prop="formId"
                  align="center"
                  label="表单标识">
                </el-table-column>
                <el-table-column
                  prop="version"
                  align="center"
                  label="版本号"
                  width="100">
                </el-table-column>
                <el-table-column
                  fixed="right"
                  align="center"
                  label="操作"
                  width="200">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleFormTest(scope.row.name, scope.row.deploymentId)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div></el-col>

            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="query.page + 1"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="query.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total" style="float: right; margin-top: 20px;">
            </el-pagination>
          </el-row>
        </el-card>
      </div>

      <div style="background-color: white;
          border-top: 1px solid rgb(232,232,232);
          position: absolute;
          bottom: 0; left: 0;
          height: 70px; width: 100%;
          line-height: 70px; padding-left: 20px; padding-right: 20px;">
        <div style="float:right; margin: 17px;">
          <el-button type="primary" style="float: right" @click.native="handleProcessInstance()">提交</el-button>
          <el-button plain style="float: right; margin-right: 20px;" @click="handleClear()">清空</el-button>
          <el-button plain style="float: right; margin-right: 20px;" @click="openFormDialog = false">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="testFormDialog"
      :fullscreen="true"
      :show-close="false">
      <div style="
        border-bottom: 1px solid rgb(232,232,232);
        position: absolute;
        top: 0; left: 0;
        height: 70px; width: 100%;
        line-height: 70px; padding-left: 20px; padding-right: 20px;">
        <span style="font-weight: bold; font-size: 20px;">表单查看 —— {{ formTitle }}</span>

        <div style="float:right;">
          <el-button plain icon="el-icon-close" @click="testFormDialog = false"></el-button>
        </div>
      </div>

      <div class="formEditor" ref="formTest"></div>
    </el-dialog>
  </div>
</template>

<script>

import {getFormByte, listForm} from "@/api/camunda/form";
import {Form} from "@bpmn-io/form-js";

export default {
  name: "user",
  data(){
    return {
      query: {
        page: 0,
        size: 10
      },
      total: 0,
      openFormDialog: false,
      title: '',
      property: null,
      formList: [],
      commandStack: null,
      element: null,

      formTitle: '',
      formId: undefined,
      formEditorTest: null,
      testFormDialog: false,

      checkForm: undefined,
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.query.page = val - 1
      this.init()
    },
    handleSizeChange(val) {
      this.query.size = val
      this.init()
    },
    handleFormTest(name, deploymentId) {
      this.testFormDialog = true
      this.formTitle = name

      const _this = this
      this.$nextTick(function(){
        // 初始化表单
        if(_this.formEditorTest !== null){
          _this.formEditorTest.destroy()
        }

        _this.formEditorTest = new Form({
          container: _this.$refs.formTest
        });

        getFormByte(deploymentId)
          .then(({data}) => {
            _this.formEditorTest.importSchema(JSON.parse(data));
          }).catch()
      })
    },
    handleProcessInstance(){
      let formRef = ''
      if(this.checkForm){
        formRef = this.checkForm
      }
      this.updateFormRef(formRef)
    },
    handleClear() {
      this.updateFormRef('')
    },
    updateFormRef(formRef) {
      if(this.commandStack && this.element){
        const businessObject = this.element.businessObject
        const element = this.element
        if(!businessObject.get('formRefBinding')){
          this.commandStack.execute('element.updateModdleProperties', {
            element,
            moddleElement: businessObject,
            properties: {
              'camunda:formRefBinding': 'deployment'
            }
          });
        }

        this.commandStack.execute('element.updateModdleProperties', {
          element,
          moddleElement: businessObject,
          properties: {
            'camunda:formRef': formRef
          }
        });
        this.openFormDialog = false
      }
    },
  }
}
</script>

<style>
</style>
